.select_list {
	--height: min(250px, 50vh);
	--width: 60vw;
	position: fixed;
	left: 50%;
	bottom: 5px;
	width:  var(--width);
	height: var(--height);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	z-index: 10;
	color: white;
	transition: all 0.15s ease;
	transform: translateX(-50%);
	.title {
		width:  var(--width);
		height: 20px;
		display: flex;
		gap: 5px;
	}
	.list {
		width:  var(--width);
		height: calc(var(--height) - min(32px, 8vh) - 35px);
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 2vh;
		flex-wrap: nowrap;
		background-color: rgba(0, 0, 0, 0.5);
		border: 1px white solid;
		.pics {
			height: 100%;
			aspect-ratio: 1 / 1.45;
			position: relative;
			img {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				height: 80%;
				&:hover {
					cursor: pointer;
				}
			}
		}
		.plaids, .poss {
			height: 100%;
			aspect-ratio: 1 / 1.3;
			position: relative;
			.plaid, .pos {
				position: absolute;
				height: 100%;
				width: 100%;
				display: flex;
				gap: 5px;
				flex-direction: column;
				align-content: center;
				align-items: center;
				justify-items: center;
				justify-content: center;
				color: #9ed3ff;
				font-size: max(2vh, 12px);
				div {
					height: 60%;
					width: 60%;
					border: 2px solid #9ed3ff;
					display: flex;
					align-content: center;
					align-items: center;
					justify-items: center;
					justify-content: center;
					img {
						height: 80%;
						&:hover {
							cursor: pointer;
						}
					}
					.defence {
						transform-origin: center center;
						transform: rotateZ(-90deg);
					}
				}
			}
		}
		&::-webkit-scrollbar {
			opacity: 0;
			height: 10px;
		}
		&::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border: 2px solid white;
			border-radius: 8px;
		}
	}
	.pos_list {
		justify-content: center;
	}
	.button_list {
		background: rgba(0, 0, 0, 0.6) ;
		min-width: 25%;
		gap: 5px;
	}
	.confirm {
		display: grid;
		justify-items: center;
		align-items: center;
	}
}
.unshow {
	transform: translateX(-50%) translateY(calc(100% - 20px));
}

.move_up {
	&-enter-active,
	&-leave-active {
		transition: transform 0.2s ease;
	}

	&-enter-from,
	&-leave-to {
		transform: translateX(-50%) translateY(120%);
	}

	&-enter-to,
	&-leave-from {
		transform: translateX(-50%) translateY(0%);
	}
}